<!--
 * @Author: Pure <305737824@qq.com>
 * @CreateTime: 2022-01-24 17:08:53
 * @LastEditors: Pure <305737824@qq.com>
 * @LastEditTime: 2022-02-15 13:52:12
 * @Description: 工单处理流程面板
-->
<template>
  <pure-card v-loading="loading" class="max-height ticket" :disabled="disabled">
    <div slot="header">处理流程</div>
    <el-timeline :reverse="false">
      <el-timeline-item
        v-for="(item,index) in processData"
        :key="index"
        :timestamp="item.createTime"
        placement="top"
      >
        <div class="">
          <pure-button :label="item.operStateToName" type="ghost" size="mini" :disabled="disabled" />
        </div>
        <div class="process">
          {{ item.createUser | staffId }}

          <template v-if="item.operState.includes('forward')">
            转单给
            <span class="dispatch">
              {{ item.processValueToName }}
            </span>
          </template>
          <template v-else-if="item.operState.includes('allocate')">
            派单给
            <span class="dispatch">
              {{ item.processValueToName }}
            </span>
          </template>
          <template v-else>
            {{ item.operStateToName }}
          </template>
          <div v-if="item.operState==='assist'">
            <div v-for="(assistItem,assistIndex) in item.assistList" :key="assistIndex">
              <span>{{ assistItem.sendUserToName || assistItem.sendTeamToName }} </span>
              <span :class="'state--'+assistItem.currState"> {{ assistItem.currStateToName }} </span>
              <el-button type="text" size="mini" @click="onViewTicket(assistItem.childOrderNum)"> 查看</el-button>
              <el-button v-if="operatorType==='UPDATE'&& assistItem.currState==='wait_delivery'" type="text" size="mini" @click="onDispatchTicket(assistItem.childOrderNum)"> 派单</el-button>
            </div>
          </div>
        </div>

        <preview
          v-if="item.processEnclosure"
          :file-list="item.processEnclosure | stringifyToArr"
        />
        <div v-if="item.transHistory" class="reason">
          转交记录:{{ item.transHistory }}
        </div>
        <div v-if="item.remark" class="reason">说明:{{ item.remark }}</div>
        <div v-if="item.makeWay" class="reason">
          解决方法:{{ item.makeWay }}
        </div>
        <div v-if="item.processValueName" class="reason">
          原因：{{ item.processValueName }}
        </div>
      </el-timeline-item>
    </el-timeline>
    <div v-if="tip" class="tip">{{ tip }}</div>
  </pure-card>
</template>

<script>
import TicketApi from '../api';
import DispatchTicketDialog from '../dialog/dispatch.vue';
import TicketInfoDrawer from '@/feat/ticket/drawer/ticket.vue';
export default {
  name: 'ProcessFlow',
  components: {
    preview: () => import('@/components/preview/index.vue'),
  },
  props: {
    // 工单编号
    id: {
      type: String,
      default: null,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    operatorType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      processData: [],
      loading: true,
      tip: '',
    };
  },
  async created() {
    await this.fetchData();
  },
  methods: {
    async onViewTicket(ticketId) {
      this.$innerDrawer({
        width: '1688px',
        component: () => <TicketInfoDrawer operatorType='VIEW' id={ticketId}/>,
      });
    },
    /**
     * 派单
     * @param {String} ticketId 工单编号
     */
    async onDispatchTicket(ticketId) {
      this.$innerDrawer({
        width: '548px',
        component: () => <DispatchTicketDialog ticketId={ticketId} onDone={this.fetchData}/>,
      });
    },
    async fetchData() {
      try {
        if (!this.id) {
          return;
        }
        this.processData = await TicketApi.processFlow(this.id);
      } catch (error) {
        this.tip = '流程信息获取失败';
        console.error(error);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/ticket.scss";
.el-timeline {
    padding-inline-start: 0px;
    .el-timeline-item__timestamp {
      color: #879bba;
    }
    .process,
    .reason {
      padding-top: 6px;
      color: #2d405e;
      overflow-wrap: anywhere;
      line-height: 28px;
    }
  }
.dispatch {
    color: $--pure-color-success;
}
.tip {
  color: $--pure-color-danger;
  padding: 10px 0;
  text-align: center;
}
</style>
